<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
        <meta name="description" content="bootstrap admin template">
        <meta name="author" content="">
        <script type="text/javascript" src="../_resource/js/header.js"></script>
        <script>
            var RUN_FUNCS = [];
            var SITE_URL = "http://admin.html.me";
            var CURR_CONTROLLER = "Node";
            var CURR_ACTION = "index";
            Breakpoints();
        </script>
        <style type="text/css">
            .list-table table td, .list-table table th{background:#fff; text-align:center;}
            .__access{display: none;}
            .node-type-Other-Api{color: orangered;font-weight: bolder;}
            .node-type-Admin-Api{color: #86d640;font-weight: bolder;}
            /*.node-type-Folder{color: #333333;font-weight: bolder;}*/
            .td-editable-span{min-width:200px;display: inline-block;height: 25px;line-height: 25px;text-indent: 5px;}
            .td-editable-span-active{border: 1px solid lightgray;}
        </style>
    </head>
    <body class="dashboard">
        <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation" id="navbardefaultmodel">
             <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('head_html')"></script>
        </nav>
        <div class="site-menubar">
            <div class="site-menubar-body" id="site-menubar-body">
                 <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('nav_html')"></script>
            </div>
        </div>

        <!-- Page -->
        <div class="page">
            <div class="page-content container-fluid">

                <div
                    class="list-table " 

                    style="" 
                    >
                    <div
                        class="panel " 

                        style="" 
                        >
                        <div class="panel-body">
                            <div class="list-btns margin-bottom-15 " style="height: 36px;">
                                <span style="color:orangered;">Developer operation part, take care of these node, mail to: <a href="mailto:guojunzhou@huonuomedia.com">guojunzhou@huonuomedia.com</a>, if you have any questions.</span>
                            </div>
                            <div class="list-btns margin-bottom-15 " style="height: 36px;">
                                <a class="btn btn-primary __access node-create" data-pk="0" data-depth="0" id="_access-create-top-node" href="#">Create Top Node</a>
                            </div>
                            <table id="tabel201709201430488112715" border="0" cellpadding="6" cellspacing="1" class="table table-bordered checkListTable" style="">
                                <thead class="list-thead">
                                    <tr>
                                        <td class="nosort" width="60" style="text-align:left; line-height: normal;">
                                            <span class="checkbox-custom checkbox-primary">
                                                <input class="selectable-all" type="checkbox" onclick="$.tableCheckHandler(this)">
                                                <label></label>
                                            </span>
                                        </td>
                                        <td class="" style="text-align:center;white-space:nowrap;" width="100" code="id">
                                            <span>ID</span>
                                        </td>
                                        <td class="" style="text-align:left;white-space:nowrap;" width="100" code="node-path">
                                            <span>Node Path</span>
                                        </td>
                                        <td class="" style="text-align:left;white-space:nowrap;" code="name">
                                            <span>Name</span>
                                        </td>
                                        <td class="" style="text-align:left;white-space:nowrap;" width="150" code="path">
                                            <span>Path</span>
                                        </td>
                                        <td class="" style="text-align:center;white-space:nowrap;" width="100" code="type">
                                            <span>Tpye</span>
                                        </td>
                                        <td class="" style="text-align:center;white-space:nowrap;" width="100" code="pid">
                                            <span>Parent ID</span>
                                        </td>
                                        <td class="" style="text-align:center;white-space:nowrap;" width="150" code="created_at">
                                            <span>Create Time</span>
                                        </td>
                                        <td class="" style="text-align:center;white-space:nowrap;" width="150" code="updated_at">
                                            <span>Last Edit</span>
                                        </td>
                                        <td class="" style="text-align:center;white-space:nowrap;" width="150" code="status">
                                            <span>Status</span>
                                        </td>
                                        <td class="nosort" style="text-align:center;white-space:nowrap;" width="200" code="">
                                            <span>Action</span>
                                        </td>
                                    </tr>
                                </thead>
                                <tbody class="list-tbody" id="node-table"></tbody>
                            </table>

                            <script type="text/javascript">
                                $(document).ready(function () {
                                    window.loadNodeData = function () {
                                        $.setLoading($('#node-table'));
                                        Api.Get('getNodeList', {}, function (object, error) {
                                            console.log(object);
                                            $.setLoading($('#faq-cate-table'), 1);
                                            if (object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200) {
                                                var tableHtml = '';
                                                function getNodesHtml(nodes, depth, pathPrefix, isLeaf = false){
                                                    switch (depth) {
                                                        case 1:
                                                            var nameIndent = '';
                                                            break;
                                                        case 2:
                                                            var nameIndent = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|— ';
                                                            break;
                                                        case 3:
                                                            var nameIndent = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└— ';
                                                            break;
                                                    }
                                                    for (var i = 0; i < nodes.length; ++i) {
                                                        var node = nodes[i];
                                                        if (!(node['_sub'] && node['_sub'].length > 0)) {
                                                            isLeaf = true;
                                                        }
                                                        tableHtml = tableHtml + Api.render('<tr class="tr-1 {evenOrOdd} node-tr" key="{pk}" data-prefix="{prefix}" primary="id" style="display:{displayStatus};">' +
                                                                '<td width="60" style="text-align:left; line-height: normal;">' +
                                                                '<span class="checkbox-custom checkbox-primary">' +
                                                                '<input class="selectable-item" type="checkbox" name="key" id="row-{pk}" value="{pk}" />' +
                                                                '<label for="row-{pk}"></label>' +
                                                                '<i class="fa {openStatus} node-toggle" data-id="{pk}" data-prefix="{prefix}" style="width:20px;height:20px;cursor:pointer;"></i>' +
                                                                '</span>' +
                                                                '</td>' +
                                                                '<td width="100" class="" code="id">{pk}</td>' +
                                                                '<td width="100" class="" code="node-path" style="text-align:left;">{nodePath}</td>' +
                                                                '<td code="name" style="text-align:left;">{nameIndent}<span class="td-editable-span">{nodeName}</span></td>' +
                                                                '<td width="150" class="" code="path" style="text-align:left;"><span class="td-editable-span">{path}</span></td>' +
                                                                '<td width="100" class="node-type-{type}" code="type" style="">{type}</td>' +
                                                                '<td width="100" class="" code="pid" style="">{pid}</td>' +
                                                                '<td width="150" class="" code="created_at" style="">{createTime}</td>' +
                                                                '<td width="150" class="" code="updated_at" style="">{updateTime}</td>' +
                                                                '<td width="150" class="" code="status" style=""><span class="td-editable-span">{status}</span></td>' +
                                                                '<td width="200" class="list-item-action" code="" style="">' +
                                                                '<a href="#" class="node-save" data-pk="{pk}" style="float:left;margin-left:10px;display:none;">Save</a>' +
                                                                '<a href="#" class="node-edit {__accessEditClass}" data-pk="{pk}" style="float:left;margin-left:10px;">Edit</a>' +
                                                                '{createChildHidenStart}<a href="#" class="node-create {__accessCreateClass} _access-create-top-node" data-pk="{pk}" data-depth="{depth}" style="float:left;margin-left:10px;">Create Child</a>{createChildHidenEnd}' +
                                                                '{deleteChildHidenStart}<a href="#" class="node-delete {__accessDeleteClass}" data-pk="{pk}" data-depth="{depth}" style="float:left;margin-left:10px;color:red;">Delete</a>{deleteChildHidenEnd}' +
                                                                '</td>' +
                                                                '</tr>', {
                                                                    'evenOrOdd': node['id'] % 2 == 1 ? 'odd' : 'even',
                                                                    'openStatus': node['_sub'] && node['_sub'].length > 0 ? 'fa-caret-right' : '',
                                                                    'displayStatus': depth == 1 ? '' : 'none',
                                                                    'prefix': pathPrefix,
                                                                    'pk': node['id'],
                                                                    'depth': depth,
                                                                    'nodePath': pathPrefix + node['id'],
                                                                    'nameIndent': nameIndent,
                                                                    'nodeName': node['node_name'],
                                                                    'path': node['node_path'],
                                                                    'type': node['type'] == 1 ? 'Admin-Api' : node['type'] == 2 ? 'Other-Api' : 'Folder',
                                                                    'pid': node['pid'],
                                                                    'createTime': node['created_at'],
                                                                    'updateTime': node['updated_at'],
                                                                    'status': node['status'] == 1 ? 'Active' : node['status'] == 2 ? 'Deactivate' : 'Deleted',
                                                                    '__accessCreateClass': window.Access.isAccessToAccessId('_access-create-top-node') ? '' : '__access',
                                                                    '__accessEditClass': window.Access.isAccessToAccessId('_access-edit-node') ? '' : '__access',
                                                                    '__accessDeleteClass': window.Access.isAccessToAccessId('_access-delete-node') ? '' : '__access',
                                                                    'createChildHidenStart': depth == 3 ? '<!--' : '',
                                                                    'createChildHidenEnd': depth == 3 ? '-->' : '',
                                                                    'deleteChildHidenStart': isLeaf ? '' : '<!--',
                                                                    'deleteChildHidenEnd': isLeaf ? '' : '-->',
                                                                });
                                                        if (node['_sub'] && node['_sub'].length > 0) {
                                                            pathPrefix = pathPrefix + node['id'] + ' - ';
                                                            getNodesHtml(node['_sub'], depth + 1, pathPrefix, isLeaf);
                                                            pathPrefix = pathPrefix.replace(node['id'] + ' - ', '');
                                                        }
                                                    }
                                                }


                                                getNodesHtml(object['data'], 1, '');
                                                if (tableHtml) {
                                                    $('#node-table').html(tableHtml);
                                                    if ($('#node-table').data('inited') != 1) {
                                                        $('#node-table').data('inited', 1);
                                                        var minwidth = 0;
                                                        var isFixedColumns = minwidth > 0 && $('#tabel201709201430488112715').width() < minwidth;
                                                        // console.log($('#tabel201709201430488112715').width(), isFixedColumns);
                                                        var table = $('#tabel201709201430488112715').DataTable({
                                                            fixedHeader: true,
                                                            autoWidth: isFixedColumns,
                                                            scrollCollapse: true,
                                                            paging: false,
                                                            // bSort : false,
                                                            fnDrawCallback: function (obj) {
                                                                // console.log(obj);
                                                            },
                                                            info: false,
                                                            searching: false,
                                                            scrollX: true,
                                                            order: [[0, '']],
                                                            columnDefs: [
                                                                {targets: 'nosort', orderable: false, sSortAsc: false}
                                                            ]
                                                        }).on('order.dt', function () {
                                                            var order = table.order()[0];
                                                            var code = $('thead td', this).eq(order[0]).attr('code');
                                                            console.log(code);
                                                        });
                                                        if (isFixedColumns) {
                                                            new $.fn.dataTable.FixedColumns(table, {
                                                                leftColumns: 1,
                                                                rightColumns: 1
                                                            });
                                                        }
                                                        setTimeout(function () {
                                                            table.columns.adjust().draw();
                                                        }, 5);
                                                        $('.node-toggle').click(function () {
                                                            var id = $(this).data('id'), prefix = $(this).data('prefix');
                                                            if ($(this).attr('status') == 'close') {
                                                                $('.node-toggle[data-prefix="' + id + ' - ' + '"]').each(function (i, obj) {
                                                                    var _id = $(obj).data('id');
                                                                    var _prefix = $(obj).data('prefix');
                                                                    console.log(_prefix + _id);
                                                                    $('.node-tr[data-prefix="' + _prefix + _id + ' - ' + '"]').css('display', 'none');
                                                                    if ($(obj).hasClass('fa-caret-right') || $(obj).hasClass('fa-caret-down')) {
                                                                        $(obj).addClass('fa-caret-right').removeClass('fa-caret-down');
                                                                    }
                                                                    $(obj).attr('status', 'open');
                                                                });
                                                                $('.node-tr[data-prefix="' + prefix + id + ' - ' + '"]').css('display', 'none');
                                                                $(this).addClass('fa-caret-right').removeClass('fa-caret-down');
                                                                $(this).attr('status', 'open');
                                                            } else {
                                                                $('.node-tr[data-prefix="' + prefix + id + ' - ' + '"]').css('display', '');
                                                                $(this).addClass('fa-caret-down').removeClass('fa-caret-right');
                                                                $(this).attr('status', 'close');
                                                            }
                                                        });
                                                        // show all & open all folder
                                                        $('.fa-caret-right').addClass('fa-caret-down').removeClass('fa-caret-right');
                                                        $('.fa-caret-down').attr('status', 'close');
                                                        $('.node-tr').css('display', '');
                                                        $('.node-edit').click(function () {
                                                            if ($(this).data('editing') == 1) {
                                                                return false;
                                                            }
                                                            $(this).data('editing', 1);
                                                            var id = $(this).data('pk');
                                                            // $('.node-tr[key="'+id+'"]').css('border', '1px solid orange');
                                                            $('.node-tr[key="' + id + '"]').find('td[code="name"]').find('span').addClass('td-editable-span-active').attr('contenteditable', 'true').focus();
                                                            $('.node-tr[key="' + id + '"]').find('td[code="path"]').find('span').addClass('td-editable-span-active').attr('contenteditable', 'true');
                                                            var type = $('.node-tr[key="' + id + '"]').find('td[code="type"]').html();
                                                            $('.node-tr[key="' + id + '"]').find('td[code="type"]').html(
                                                                    '<select style="color:black;">' +
                                                                    '<option value="1" ' + (type == 'Admin-Api' ? 'selected="selected"' : '') + '>Admin-Api</option>' +
                                                                    '<option value="2" ' + (type == 'Other-Api' ? 'selected="selected"' : '') + '>Other-Api</option>' +
                                                                    '<option value="3" ' + (type == 'Folder' ? 'selected="selected"' : '') + '>Folder</option>' +
                                                                    '</select>'
                                                                    );
                                                            $('.node-tr[key="' + id + '"]').find('td[code="status"]').html('<span style="color:red;font-weight:bolder;">Editing...</span>');
                                                            $('.node-save[data-pk="' + id + '"]').css('display', 'block');
                                                            return false;
                                                        });
                                                        $('.node-save').click(function () {
                                                            var id = $(this).data('pk');
                                                            var nodeName = $('.node-tr[key="' + id + '"]').find('td[code="name"]').find('span').html();
                                                            var nodePath = $('.node-tr[key="' + id + '"]').find('td[code="path"]').find('span').html();
                                                            var nodeType = $('.node-tr[key="' + id + '"]').find('td[code="type"]').find('select').val();
                                                            var nodePid = $('.node-tr[key="' + id + '"]').find('td[code="pid"]').html();
                                                            var data = {
                                                                id: id,
                                                                name: nodeName,
                                                                path: nodePath,
                                                                type: nodeType,
                                                                pid: nodePid,
                                                            };
                                                            console.log(data);
                                                            Api.Put('saveNode', data, function (object, error) {
                                                                if (object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200) {
                                                                    $.showSuccess('Save Node Successfully', 300, function () {
                                                                        window.location.reload();
                                                                    });
                                                                } else {
                                                                    $.showError('Something Error, Retry Please.', 300, function () {
                                                                        // window.location.reload();
                                                                    });
                                                                }
                                                            });
                                                        });
                                                        $('.node-create').click(function () {
                                                            if ($(this).data('creating') == 1) {
                                                                return false;
                                                            }
                                                            $(this).data('creating', 1);
                                                            var id = $(this).data('pk');
                                                            var depth = $(this).data('depth');
                                                            switch (depth) {
                                                                case 0:
                                                                    var nameIndent = ' ';
                                                                    break;
                                                                case 1:
                                                                    var nameIndent = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|— ';
                                                                    break;
                                                                case 2:
                                                                    var nameIndent = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└— ';
                                                                    break;
                                                                default :
                                                                    $.showError('This node can not create child node.', 300, function () {
                                                                    });
                                                                    return false;
                                                            }
                                                            var createTr = Api.render(
                                                                    '<tr class="tr-1 {evenOrOdd} node-tr create-node-tr" key="{pk}" data-prefix="{prefix}" primary="id" style="display:{displayStatus};">' +
                                                                    '<td width="60" style="text-align:left; line-height: normal;"></td>' +
                                                                    '<td width="100" class="" code="id">Auto Increment</td>' +
                                                                    '<td width="100" class="" code="node-path" style="text-align:left;">Auto Fill</td>' +
                                                                    '<td code="name" style="text-align:left;line-height:25px;">' +
                                                                    '<b>{nameIndent}</b><span class="td-editable-span td-editable-span-active child-node-name" data-pk="{pk}" contenteditable="true"></span>' +
                                                                    '</td>' +
                                                                    '<td width="150" class="" code="path" style="text-align:left;">' +
                                                                    '<span class="td-editable-span td-editable-span-active child-node-path" data-pk="{pk}" contenteditable="true"></span>' +
                                                                    '</td>' +
                                                                    '<td width="100" class="node-type-{type}" code="type" style="">' +
                                                                    '<select style="color:black;" class="child-node-type" data-pk="{pk}">' +
                                                                    '<option value="1">Admin-Api</option>' +
                                                                    '<option value="2">Other-Api</option>' +
                                                                    '<option value="3">Folder</option>' +
                                                                    '</select>' +
                                                                    '</td>' +
                                                                    '<td width="100" class="" code="pid" style="">{pid}</td>' +
                                                                    '<td width="150" class="" code="created_at" style="">Auto Fill</td>' +
                                                                    '<td width="150" class="" code="updated_at" style="">Auto Fill</td>' +
                                                                    '<td width="150" class="" code="status" style=""><span class="td-editable-span">' + 'Creating' + '</span></td>' +
                                                                    '<td width="200" class="list-item-action" code="" style="">' +
                                                                    '<a href="#" class="node-cancel {__accessClass} _access-faq-eidt" data-pk="{pk}" style="float:left;margin-left:10px;">Cancel</a>' +
                                                                    '<a href="#" class="node-submit {__accessClass} _access-faq-eidt" data-pk="{pk}" data-depth="{depth}" style="float:left;margin-left:10px;display:{createChildDisplay};">Submit</a>' +
                                                                    '</td>' +
                                                                    '</tr>',
                                                                    {
                                                                        'nameIndent': nameIndent,
                                                                        'pid': id,
                                                                        'pk': id,
                                                                    }
                                                            );
                                                            if (id == 0) {
                                                                $('.node-tr').eq(0).before(createTr);
                                                            } else {
                                                                $('.node-tr[key="' + id + '"]').after(createTr);
                                                            }
                                                            $('.node-cancel').click(function () {
                                                                $('.create-node-tr[key="' + $(this).data('pk') + '"]').remove();
                                                                $('.node-create[data-pk="' + $(this).data('pk') + '"]').data('creating', 0);
                                                                return false;
                                                            });

                                                            $('.node-submit').click(function () {
                                                                var pk = $(this).data('pk');
                                                                var nodeName = $('.child-node-name[data-pk="' + pk + '"]').html();
                                                                var nodePath = $('.child-node-path[data-pk="' + pk + '"]').html();
                                                                var nodeType = $('.child-node-type[data-pk="' + pk + '"]').val();
                                                                // var nodeStatus = $('.child-node-status[data-pk="'+pk+'"]').html();
                                                                var data = {
                                                                    pid: pk,
                                                                    name: nodeName,
                                                                    path: nodePath,
                                                                    type: nodeType
                                                                };
                                                                // console.log(data);
                                                                Api.Post('createNode', data, function (object, error) {
                                                                    if (object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200) {
                                                                        $.showSuccess('Create Node Successfully', 300, function () {
                                                                            window.location.reload();
                                                                        });
                                                                    } else {
                                                                        $.showError('Something Error, Retry Please.', 300, function () {
                                                                            window.location.reload();
                                                                        });
                                                                    }
                                                                });
                                                                return false;
                                                            });
                                                            return false;
                                                        });
                                                        $('.node-delete').click(function () {
                                                            var pk = $(this).data('pk');
                                                            Api.Delete('deleteNode', {id: pk}, function (object, error) {
                                                                if (object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200) {
                                                                    $.showSuccess('Delete Node Successfully', 300, function () {
                                                                        window.location.reload();
                                                                    });
                                                                } else {
                                                                    $.showError('Something Error, Retry Please.', 300, function () {
                                                                        window.location.reload();
                                                                    });
                                                                }
                                                            });
                                                            return false;
                                                        });
                                                    }

                                                }
                                            } else {
                                                $.showError('Something Error, Retry Please.', 300, function () {
                                                    // window.location.reload();
                                                });
                                                return true;
                                            }
                                        });
                                    }
                                    loadNodeData();
                                });
                            </script>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Modal -->
            <div class="modal fade" id="confirmModal" aria-hidden="true" role="dialog" tabindex="-1">
                <div class="modal-dialog modal-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <p></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary"></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="alertModal" aria-hidden="true" role="dialog" tabindex="-1">
                <div class="modal-dialog modal-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <p></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Modal -->
        </div>
        <!-- End Page -->

        <!-- Footer -->
        <script type="text/javascript" src="../_resource/js/footer.js"></script>

        <script>
                                (function (document, window, $) {
                                    'use strict';

                                    var Site = window.Site;
                                    $(document).ready(function () {
                                        Site.run();
                                        $('textarea[maxlength]').maxlength({
                                            threshold: 1000,
                                            placement: 'bottom-left-inside'
                                        });

                                        $.components.register("datepicker", {mode: "default", defaults: {autoclose: !0}});

                                        if (RUN_FUNCS.length > 0) {
                                            for (var i = 0; i < RUN_FUNCS.length; i++) {
                                                RUN_FUNCS[i].call();
                                            }
                                        }
                                    });
                                })(document, window, jQuery);


        </script>
    </body>
</html>